<template>
  <div class="main">
    <div class="batch-title">征集物品详情</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div class="titleBox">
              <span>
                <img class="img" src="@/assets/images/jd.png" />
              </span>
              <span class="font1">鉴定流程</span>
              <span class="font2">提交鉴定-鉴定登记-鉴定结束</span>
              <!-- <span class="font3">-鉴定登记-鉴定结束</span> -->
            </div>
            <div class="topTitle">批次信息</div>
            <div class="basin-info">
              <div style="display: flex; align-items: center">
                <div class="basin-left">
                  <div class="box">
                    <span>批次编号：</span>
                    <span>{{ dispatchInfo.batchCode }}</span>
                  </div>
                </div>
                <div class="basin-right">
                  <div class="box">
                    <span>批次名称：</span>
                    <span>{{ dispatchInfo.batchName }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="basin-infoB">
              <div class="basin-left">
                <div class="box">
                  <span>描述：</span>
                  <span>{{ dispatchInfo.description }}</span>
                </div>
              </div>
            </div>
            <div class="bd-tab">
              <div class="bd-tab__item" :class="isTf && 'active'" @click="
                isTf = true;
              dispatchInfo.identifyTypeCode = 'A3101';
              getDispatchInfo()
                ">
                真伪鉴定
              </div>
              <div class="bd-tab__item" :class="!isTf && 'active'" @click="
                isTf = false;
              dispatchInfo.identifyTypeCode = 'A3102';
              getDispatchInfo()
                ">
                价值鉴定
              </div>
            </div>
            <div class="topTitle">鉴定单信息</div>
            <div class="basin-info">
              <div style="display: flex; align-items: center">
                <div class="basin-left">
                  <div class="box">
                    <span>鉴定编号：</span>
                    <NSelect size="small" :options="listjdOption" v-model:value="dispatchInfoD.identifyCode"
                      placeholder="请选择鉴定编号" clearable style="width: 300rem" @update-value="getIdentifyCode" />
                  </div>
                  <div class="box">
                    <span>鉴定日期：</span>
                    <NInput placeholder="鉴定日期" size="small" style="width: 300rem"
                      v-model:value="dispatchInfoD.identifyTime" disabled />
                  </div>
                  <div class="box">
                    <span>鉴定类型：</span>
                    <NInput size="small" v-model:value="dispatchInfoD.identifyType" placeholder="鉴定类型" clearable
                      style="width: 300rem" disabled />
                  </div>
                </div>
                <div class="basin-right">
                  <div class="box">
                    <span>鉴定名称：</span>
                    <NInput placeholder="鉴定名称" size="small" style="width: 300rem"
                      v-model:value="dispatchInfoD.identifyName" disabled />
                  </div>
                  <div class="box">
                    <span>鉴定地点：</span>
                    <NInput placeholder="鉴定地点" size="small" style="width: 300rem"
                      v-model:value="dispatchInfoD.identifyAddress" disabled />
                  </div>
                  <div class="box">
                    <span>描述：</span>
                    <NInput placeholder="描述" size="small" style="width: 300rem"
                      v-model:value="dispatchInfoD.identifyDescription" disabled />
                  </div>
                </div>
              </div>
            </div>
            <div class="basin-infoB">
              <div class="basin-left">
                <div class="box">
                  <span>鉴定专家：</span>
                  <NInput size="small" v-model:value="dispatchInfoD.identifyExperts" placeholder="鉴定专家" clearable
                    style="width: 910rem" disabled />
                </div>
                <div class="box">
                  <span>附件：</span>
                  <VAttachments :attach-list="dispatchInfoD.files"></VAttachments>
                </div>
              </div>
            </div>
            <div class="topTitle" v-if="isTf">
              汇总结果
            </div>
            <div class="table" v-if="isTf">
              <NDataTable :bordered="false" :columns="columnsAdd" :data="tableDataAdd" :pagination="false" striped
                :rowKey="rowKeyAdd" />
                <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
        show-size-picker show-quick-jumper :suffix="() => '页'">
        <template #prefix>
          <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
            </div>
            <div class="br" v-if="isTf"></div>
            <div class="topTitle">鉴定清单</div>
            <div class="table">
              <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped
                :rowKey="rowKey" />
            </div>
            <div class="br"></div>
            <div class="basin-infoC">
              <div class="topTitle">附件</div>
              <div style="display: flex; align-items: center">
                <div class="basin-left">
                  <div class="box">
                    <span>鉴定方案：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.planFiles ? dispatchInfoFJ.planFiles : []"></VAttachments>
                  </div>
                  <div class="box">
                    <span>汇总鉴定意见：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.summaryResultFiles ? dispatchInfoFJ.summaryResultFiles : []
                      "></VAttachments>
                  </div>
                  <div class="box">
                    <span>会议纪要材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.meetingMinutesFiles ? dispatchInfoFJ.meetingMinutesFiles : []
                      "></VAttachments>
                  </div>
                  <div class="box">
                    <span>视频材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.videoFiles ? dispatchInfoFJ.videoFiles : []">
                    </VAttachments>
                  </div>
                  <div class="box">
                    <span>其他材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.otherFiles ? dispatchInfoFJ.otherFiles : []">
                    </VAttachments>
                  </div>
                  <div class="box">
                    <span>谈判会材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.talkFiles ? dispatchInfoFJ.talkFiles : []"></VAttachments>
                  </div>
                </div>
                <div class="basin-right">
                  <div class="box">
                    <span>专家鉴定意见：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.expertFiles ? dispatchInfoFJ.expertFiles : []">
                    </VAttachments>
                  </div>
                  <div class="box">
                    <span>会议汇报材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.meetingResultFiles ? dispatchInfoFJ.meetingResultFiles : []
                      "></VAttachments>
                  </div>
                  <div class="box">
                    <span>合同和发票材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.contractFiles ? dispatchInfoFJ.contractFiles : []
                      "></VAttachments>
                  </div>
                  <div class="box">
                    <span>音频材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.audioFiles ? dispatchInfoFJ.audioFiles : []">
                    </VAttachments>
                  </div>
                  <div class="box">
                    <span>价格结果材料：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.priceFiles ? dispatchInfoFJ.priceFiles : []">
                    </VAttachments>
                  </div>
                  <div class="box">
                    <span>补充登记附件：</span>
                    <VAttachments :attach-list="dispatchInfoFJ.supplementFiles ? dispatchInfoFJ.supplementFiles : []
                      "></VAttachments>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="start">
      <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
        <template #icon>
          <img :src="VBackImg" style="width: 25rem; height: 25rem"/>
        </template>
        返回
      </NButton>
    </NSpace>
  </FixedAction>
</template>
<script setup lang="ts">
import {
  NSpace,
  NButton,
  NScrollbar,
  NSelect,
  NDataTable,
  useMessage,
  NSpin,
  NPagination,
  NInput,
  NImage
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { ref, watch, h, reactive } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { itemModel } from '@/api/item'
import { keysOf } from '@/utils/object'
import VAttachments from './Attachments.vue'
import VBackImg from '@/assets/images/back.png'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()
const isTf = ref(true)
const rowKey: any = (row: any) => row.id || ''
const rowKeyAdd: any = (row: any) => row.id || ''
const identifyId = ref(null)
const listjdOption = ref<any>([])
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    getIdentifySubItems()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getIdentifySubItems()
  }
})
const paginationReactiveJD = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    getIdentifySubItems()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getIdentifySubItems()
  }
})
const columns: DataTableColumns = [
  {
    title: '序号',
    key: 'orderIndex',
    render: (_: any, i: any) => {
      return ++i + (paginationReactiveJD.page - 1) * paginationReactiveJD.pageSize
    },
    width: '5rem',
    align: 'center'
  },
  {
    title: '征集品编码',
    key: 'subItemCode',
    width: 120
  },
  {
    title: '征集品名称',
    key: 'itemName',
    width: 100
  },
  {
    title: '类型',
    key: 'itemType',
    width: 100
  },
  {
    title: '接收时间',
    key: 'receiveTime',
    width: 100
  },
  {
    title: '移交人',
    key: 'transferUser',
    width: 100
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    align: 'center',
    fixed: 'right',
    render: (e: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => handleDetail(e)
        },
        {
          default: () => '详情'
        }
      )
    ]
  }
]
const columnsAdd: DataTableColumns = [
  {
    title: '序号',
    key: 'orderIndex',
    render: (_: any, i: any) => {
      return ++i + (paginationReactive.page - 1) * paginationReactive.pageSize
    },
    width: '5rem',
    align: 'center'
  },
  {
    title: '征集品编码',
    key: 'subItemCode',
    width: 150
  },
  {
    title: '征集品名称',
    key: 'itemName',
    width: 100
  },
  {
    title: '类型',
    key: 'itemType',
    width: 100
  },
  {
    title: '征集品真伪',
    key: 'authenticity',
    width: 100
  },
  {
    title: '意见',
    key: 'opinion',
    width: 200
  }
]
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  
    tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 获取详情
const tableData = ref([])
const tableDataAdd = ref([])
const spinShow = ref(false)
const dispatchInfo = ref<any>({
  batchCode: null,
  batchName: null,
  description: null,
  identifyTypeCode: 'A3101'
})
const dispatchInfoD = ref<any>({
  identifyCode: null,
  identifyTime: null,
  identifyType: null,
  identifyName: null,
  identifyAddress: null,
  identifyDescription: null,
  identifyExperts: null,
  files: null
})
const dispatchInfoFJ = ref<any>({
  planFiles: [],
  summaryResultFiles: [],
  meetingMinutesFiles: [],
  videoFiles: [],
  otherFiles: [],
  talkFiles: [],
  expertFiles: [],
  meetingResultFiles: [],
  contractFiles: [],
  audioFiles: [],
  priceFiles: [],
  supplementFiles: []
})
const getDispatchInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<itemModel>>({
    module: 'item',
    api: 'detail',
    override: {
      params: {
        batchId: route.params.id as never
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  keysOf(res.data).forEach((e) => {
// @ts-ignore
    if (e !== 'identifyTypeCode') {
      dispatchInfo.value[e] = res.data[e]
    }
  })
  getIdentifyList(route.params.subItemId, dispatchInfo.value.identifyTypeCode)
  spinShow.value = false
}
const getSupplementFiles = async () => {
  const [error, res] = await sendRequest<HttpResponse<itemModel>>({
    module: 'item',
    api: 'identifyRegisterDetail',
    override: {
      params: {
        identifyId: identifyId.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  // @ts-ignore
  // dispatchInfoFJ.value = res.data
  keysOf(res.data).forEach((e) => {
    dispatchInfoFJ.value[e] = res.data[e]
  })
}
//汇总结果/鉴定清单
const getIdentifySubItems = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<itemModel>>({
    module: 'item',
    api: 'identifySubItems',
    override: {
      params: {
        identifyId: identifyId.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  paginationReactive.itemCount = res.data.totalCount
  paginationReactiveJD.itemCount = res.data.totalCount
  // @ts-ignore
  tableDataAdd.value = res.data.list
  // @ts-ignore
  tableData.value = res.data.list
  spinShow.value = false
}
const listA = ref<any>([])
//鉴定申请列表
const getIdentifyList = async (id: any, v: string) => {
  listjdOption.value = []
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<itemModel>>({
    module: 'item',
    api: 'identifyList',
    override: {
      params: {
        subItemId: id,
        identifyTypeCode: dispatchInfo.value.identifyTypeCode
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  listA.value = res.data
  listA.value.length>0?(
      // @ts-ignore
  res.data.forEach((e) => {
    // @ts-ignore
    listjdOption.value.push({ label: e.identifyCode, value: e.identifyCode })
  })
  ):listjdOption.value=[]
  dispatchInfoD.value.identifyCode = listA.value.length?listA.value[0].identifyCode:null
  identifyId.value = listA.value.length?listA.value[0].id:null
  getIdentifySubItems()
  getSupplementFiles()
  // @ts-ignore
  const aa = res.data.filter((e) => e.identifyCode === dispatchInfoD.value.identifyCode)[0]
  if(aa){
    keysOf(aa).forEach((e) => {
    dispatchInfoD.value[e] = aa[e]
    if (e === 'identifyExperts') {
      dispatchInfoD.value.identifyExperts = aa.identifyExperts.join(',')
    }
  })
  }else{
    dispatchInfoD.value.identifyCode=null,
    dispatchInfoD.value.identifyTime=null,
    dispatchInfoD.value.identifyType=null,
    dispatchInfoD.value.identifyName=null,
    dispatchInfoD.value.identifyAddress=null,
    dispatchInfoD.value.identifyDescription=null,
    dispatchInfoD.value.identifyExperts=null,
    dispatchInfoD.value.files=null
  }
  spinShow.value = false
}

const getIdentifyCode = (v: string) => {
  dispatchInfoD.value.identifyCode = v
  identifyId.value = listA.value.filter((t: any) => t.identifyCode === v)[0].id
  const aa = listA.value.filter((e:any) => e.identifyCode === dispatchInfoD.value.identifyCode)[0]
  keysOf(aa).forEach((e) => {
    dispatchInfoD.value[e] = aa[e]
    if (e === 'identifyExperts') {
      dispatchInfoD.value.identifyExperts = aa.identifyExperts.join(',')
    }
  })
  getIdentifySubItems()
  getSupplementFiles()
}
const handleDetail = (e: any) => {
  router.push({
    name: 'CollectingItemsDetailtem',
    params: { id: e.itemId,identifyId:identifyId.value, subItemId: e.id , type: dispatchInfo.value.identifyTypeCode},
    query: {
      type: 'detail',
      redirect: route.fullPath
    }
  })
}

watch(
  () => route,
  () => {
    if (route.name == 'CollectingItemsDetail') {
      getDispatchInfo()
    }
  },
  { deep: true, immediate: true }
)
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-bottom: 100rem;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }

  .batch-title {
    padding: 15rem 20rem;
    font-size: 16px;
    border-bottom: 1px solid #ffffff;
    margin-bottom: 20rem;
    color: rgba(0, 0, 0, 0.85);
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #f0efee;
      @include CommonFont;

      .titleBox {
        display: flex;
        width: 100%;
        background-color: #d5e2d8;
        line-height: 40rem;
        margin-bottom: 20rem;

        &>span {
          height: 40rem;
          display: block;

          .img {
            width: 20rem;
            margin-top: 10rem;
            margin-left: 20rem;
          }
        }

        .font1 {
          font-size: 14rem;
          margin-left: 5rem;
        }

        .font2 {
          margin-left: 30rem;
          color: #5fb17f;
        }

        .font3 {
          color: red;
        }
      }

      .bd-tab {
        display: flex;
        align-items: center;
        border-radius: 4rem;
        padding: 5rem 4rem;
        width: 50%;
        margin: 0 auto 15rem;
        text-align: center;
        background-color: #ebeceb;

        &__item {
          flex: 1;
          padding: 5rem 10rem;
          border-radius: 2rem;
          transition: all 0.3s ease-in-out;
          cursor: pointer;

          &.active {
            color: #fff;
            background-color: #6cb187;
          }
        }
      }

      .basin-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;

        .basin-left {
          flex: 0 0 40%;
        }

        .box {
          display: flex;
          margin-bottom: 20rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 100rem;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
          }
        }
      }

      .basin-infoB {
        display: flex;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 20rem;

        .basin-left {
          flex: 0 0 60%;
        }

        .box {
          display: flex;
          margin-bottom: 20rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 100rem;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
          }
        }

        .box:last-child {
          margin-bottom: 20rem;
        }
      }

      .basin-infoC {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;

        .basin-left {
          flex: 0 0 40%;
        }

        .box {
          display: flex;
          margin-bottom: 20rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 130rem;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
          }
        }
      }

      .approve {
        display: flex;
        width: 100%;
        margin-bottom: 20rem;
        border-bottom: 1px dashed #bc9e70;

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 100rem;
          width: auto;
          height: 90rem;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding: 12rem;
          margin-right: 10rem;
          margin-bottom: 20rem;
        }
      }

      .table {
        width: 80%;
        background-color: transparent;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
